<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Cache-Control" content="no-siteapp">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1, minimum-scale=1, maximum-scale=1">
<meta name="renderer" content="webkit">
<meta name="google" value="notranslate">
<meta name="robots" content="index,follow">


<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="足迹">
<meta name="twitter:description" content="走过就要留下点什么">
<meta name="twitter:image:src" content="http://wenjq.gitee.io/images/avatar.jpg">

<meta property="og:url" content="http://wenjq.gitee.io">
<meta property="og:title" content="足迹">
<meta property="og:description" content="走过就要留下点什么">
<meta property="og:site_name" content="足迹">
<meta property="og:image" content="http://wenjq.gitee.io/images/avatar.jpg">
<meta property="og:type" content="website">
<meta name="robots" content="noodp">

<meta itemprop="name" content="足迹">
<meta itemprop="description" content="走过就要留下点什么">
<meta itemprop="image" content="http://wenjq.gitee.io/images/avatar.jpg">

<link rel="canonical" href="http://wenjq.gitee.io">

<link rel="shortcut icon" href="/favicon.png">
<link rel="apple-itouch-icon" href="/favicon.png">
<link rel="stylesheet" href="/bundle/index.css">
<script type="text/javascript">
    var timeSinceLang = {
        year: '年前',
        month: '个月前',
        day: '天前',
        hour: '小时前',
        minute: '分钟前',
        second: '秒前'
    };
    var root = '';
</script>


        <meta name="keywords" content="maven,">
        <meta name="description" content="Maven使用jar包管理js和css库">
        <meta name="author" content="">
        <title>Maven使用jar包管理js和css库</title>
    </head>
    <body>
        <article class="container">
            <header class="header-wrap">
  <a class="index" href="/">
    <img class="logo" src="/images/avatar.jpg" />
    足迹
  </a>
  <ul class="menu">
      <li class="menu-item"><a href="/archive.html">归档</a></li>
      <li class="menu-item"><a href="/tag.html">标签</a></li>
      <li class="menu-item"><a href="/atom.xml">订阅</a></li>
  </ul>
</header>

            <article class="main article">
                <h1 class="title">Maven使用jar包管理js和css库</h1>
                <section class="info">
                    
                    
                    
                    <span class="date" data-time="1483942416"><span class="from"></span></span>
                    
                    <span class="tags"><a class="tag" href="/tag/maven/index.html">maven</a></span>
                </section>
                <article class="content"><p>web前端使用了越来越多的js以及css库，通常情况下，我们手动将各个文件拷贝导项目目录下，这导致管理很繁琐。webjars就是将这些jars打包成jar包，方便维护和管理。开发者可以在 www.webjars.org 找到所需的资源。
maven同时支持webjars的管理。例如：需要引入bootstrap库，则只需在pom中定义：</p>

<pre><code class="language-xml">&lt;dependency&gt;
     &lt;groupId&gt;org.webjars&lt;/groupId&gt;
     &lt;artifactId&gt;bootstrap&lt;/artifactId&gt;
     &lt;version&gt;3.3.7-1&lt;/version&gt;
 &lt;/dependency&gt;﻿​
</code></pre>

<p>maven会将bootstrap引入项目。同时一会将依赖的jquery引入。
<img src="" data-src="/images/2018053013584485.png" alt="2018053013584485.png" />
可以看到，该jar包已经包含了bootstrap所有资源：
<img src="" data-src="/images/20180530135858575.png" alt="20180530135858575.png" />
可以直接使用如下方式引用
<img src="" data-src="/images/20180530135910495.png" alt="20180530135910495.png" /></p>
</article>
                <section class="author">
                    
                    <a class="name" href="/about..html"></a>
                    <div class="intro"></div>
                </section>
                <section class="recommend">
                    
                    <section class="nav prev">
                        <div class="head">上篇文章</div>
                        <a class="link" href="/2018053003.html">Maven安装及配置</a>
                    </section>
                    
                    
                </section>
                

            </article>
        </article>
        <footer class="footer">
    <span class="copyright">
        足迹 ©
        <script type="text/javascript">
            document.write(new Date().getFullYear());
        </script>
    </span>
    <span class="publish">Powered by <a href="http://www.chole.io/" target="_blank">Ink</a></span>
</footer>

        <script src="/bundle/index.js"></script>
    </body>
</html>
